<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box">
      <img src="../../assets/img/carBg.png" alt="" />

      <div class="goods-box" v-if="goodsList.length > 0">
        <div class="goods-table-head clearfix">
          <p @click="allSelect">
            <img
              src="../../assets/img/noCheckSelect.png"
              alt=""
              v-if="isAllSelect"
            />
            <img src="../../assets/img/checkSelect.png" alt="" v-else />
          </p>
          <p>商品</p>
          <p>单价</p>
          <p>数量</p>
          <p>小计</p>
          <p>操作</p>
        </div>

        <div class="goods-box-list">
          <div
            class="goods-list clearfix"
            v-for="(item, index) in goodsList"
            :key="index"
          >
            <div @click="slectGoods(index)" class="select fl">
              <img
                src="../../assets/img/noCheckSelect.png"
                alt=""
                v-if="item.isSelect"
              />
              <img src="../../assets/img/checkSelect.png" alt="" v-else />
            </div>
            <div class="goods-info fl clearfix">
              <img
                alt=""
                class="goods-pic fl"
                :src="
                  baseUrl +
                  '/sys/file/showpic?id=' + item.url.split(',')[0].split(':')[0]"
              />
              <div class="goods-info-detail">
                <p class="goods-name">
                  <!-- 华纳斯 沙发 北欧布艺沙发组合客厅家具 灰白色座包
                  双人位+右贵妃位 -->
                  {{ item.materialName }}
                </p>
                <p class="other-info">
                  <span>规格：{{ item.standName }}</span>
                  <span>所属商家：{{ item.merchant }}</span>
                </p>
              </div>
            </div>
            <p class="price fl">¥ {{ item.price }}</p>
            <div class="buy-num fl">
              <el-input-number
                v-model="item.num"
                @change="handleChange"
                :min="1"
                :max="100"
                label="描述文字"
              ></el-input-number>
            </div>
            <div class="small-total fl">
              <span>￥</span
              ><span>{{ (item.price * item.num).toFixed(2) }}</span>
            </div>
            <p class="del-goods fr" @click="delGoods(index)">删除</p>
          </div>
          <div class="total-box clearfix">
            <p @click="allSelect" class="fl all-select clearfix">
              <img
                src="../../assets/img/noCheckSelect.png"
                alt=""
                class="fl"
                v-if="isAllSelect"
              />
              <img
                src="../../assets/img/checkSelect.png"
                alt=""
                class="fl"
                v-else
              />
              <span class="fl">全选</span>
            </p>
            <p class="del-select-goods fl" @click="delSelectGoods">
              删除选中商品
            </p>
            <div class="atonce-btn fr" @click="submitClick">确认下单</div>
            <div class="total fr">
              <span>总价：</span>
              <span>￥{{ totalMoney }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="no-data">
        <img src="../../assets/img/noData.png" alt="" />
        <p>购物车空空如也， <nuxt-link to="/">快去购买吧</nuxt-link></p>
      </div>
    </div>
    <FooterPage></FooterPage>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="424px"
      :before-close="handleClose"
      :show-close="false"
    >
      <div class="prompts-one">
        <div class="prompts-head clearfix">
          <p class="wraming fl">!</p>
          <p class="fl">是否进行实名认证？</p>
        </div>
        <p class="ask">
          您还未进实名认证，暂不支持购买该商品，是否现在去实名认证 ？
        </p>
      </div>
      <span slot="footer" class="prompts-one-footer dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toAuth">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";

import Cookie from "js-cookie";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage
  },
  watch: {
    goodsList(val, old) {
      this.totalMoneyCompunted();
    },
  },
  data() {
    return {
      goodsList: [],
      num: "",
      totalMoney: 0,
      isAllSelect: false,
      dialogVisible: false, //未实名认证弹框
      tableList: [],
      pass: false, //是否实名认证
    };
  },
  mounted() {
    var list = this.goodsList;
    for (var k in list) {
      list[k]["isSelect"] = false;
    }
    this.goodsList = list;
    this.getShoppingList();
    this.getUserInfo();
    // userType 企业 CORP 个人 PERSON  Cookie.get("userType")
  },
  methods: {
    // 获取用户是否认证
    getUserInfo() {
      this.$http(
        "get",
        "/sys/user/getUser.do?userId=" + Cookie.get("user")
      ).then((res) => {
        if (res.code == "0000") {
          //NO: 未认证, YES: 已认证, GONING: 进行中, FAIL: 认证失败
          var status = res.result.identityStatus;
          if (status == "NO") {
            this.pass = false;
            this.index == 0;
          } else if (status == "YES") {
            this.index == 3;
            this.pass = true;
          } else if (status == "FAIL") {
            this.index == 3;
            this.pass = false;
          }
        }
      });
    },
    // 去实名认证
    toAuth() {
      if (Cookie.get("userType") == "PERSON") {
        this.$router.push("/personAuth");
      } else {
        this.$router.push("/authentication");
      }
    },
    handleClose() {
      this.dialogVisibleSign = false;
      this.dialogVisible = false;
    },
    handleChange() {
      this.totalMoneyCompunted();
    },
    delGoods(index) {
      var list = JSON.parse(JSON.stringify(this.goodsList));
      var delGoods = list[index];

      this.$confirm("您确认要删除该商品吗。", "删除商品？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //确认：执行删除操作
          this.$http("delete", "/sys/iaShoppingTrolley/delete.do?id=" + delGoods.id).then((res) => {
            if (res.code == "0000") {
              list.splice(index, 1);
              this.goodsList = list;
              this.$http("get", "/sys/iaShoppingTrolley/findPage.do", {
                pageNum: 1,
                pageSize: 10,
              }).then((res) => {
                if (res.code == "0000") {
                  this.$store.commit("joinCar", res.result.total);
                }
              });
            }
          });
        })
        .catch(() => {
          //取消：不执行任何操作
        });
    },
    totalMoneyCompunted() {
      var list = JSON.parse(JSON.stringify(this.goodsList));
      var total = 0;
      for (var k in list) {
        if (list[k].isSelect) {
          total += list[k].num * Number(list[k].price);
        }
      }
      this.totalMoney = total.toFixed(2);
    },
    // 全选或反选
    allSelect() {
      this.isAllSelect = !this.isAllSelect;
      var list = JSON.parse(JSON.stringify(this.goodsList));
      for (var k in list) {
        list[k].isSelect = this.isAllSelect;
      }
      this.goodsList = list;
      this.totalMoneyCompunted();
    },
    // 选择商品
    slectGoods(index) {
      var list = JSON.parse(JSON.stringify(this.goodsList));
      list[index].isSelect = !list[index].isSelect;

      this.goodsList = list;

      for (var k in list) {
        if (list[k].isSelect == false) {
          this.isAllSelect = false;
          break;
        }
      }
      this.totalMoneyCompunted();
    },
    // 删除选中的商品
    delSelectGoods() {
      var list = JSON.parse(JSON.stringify(this.goodsList));
      var allIndex = [];
      var selectList = [];
      for (var k in list) {
        if (list[k].isSelect) {
          allIndex.push(Number(k));
          selectList.push(list[k]);
        }
      }
      console.log(allIndex);
      if (allIndex.length == 0) {
        this.$message.error("请选择商品");
        return;
      }
      console.log("选择的购物车数据：", selectList);

      var selectGoodIds = [];
      for (let index = 0; index < selectList.length; index++) {
        const element = selectList[index];
        selectGoodIds.push(element.id);
      }

      console.log("选择的购物车数据Id：", selectGoodIds);

      var selectGoodIdsStr = "";

      if (selectGoodIds.length > 0) {
        selectGoodIdsStr = selectGoodIds.join(",");
      }

      this.$confirm("您确认要删除该商品吗。", "删除商品？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //确认：执行删除操作
          this.$http("delete", "/sys/iaShoppingTrolley/deleteList.do", {
            ids: selectGoodIdsStr,
          }).then((res) => {
            if (res.code == "0000") {
              this.getShoppingList();
            }
          });
        })
        .catch(() => {
          //取消：不执行任何操作
        });
    },

    //获取购物车记录列表
    getShoppingList() {
      this.$http("get", "/sys/iaShoppingTrolley/findPage.do", {
        pageNum: 1,
        pageSize: 10000,
      }).then((res) => {
        if (res.code == "0000") {
          console.log("购物车记录列表数据：", res);
          this.goodsList = res.result.rows;
        }
      });
    },

    getGoodSlDataId() {
      var list = JSON.parse(JSON.stringify(this.goodsList));
      var allIndex = [];
      var selectList = [];
      for (var k in list) {
        if (list[k].isSelect) {
          allIndex.push(Number(k));
          selectList.push(list[k]);
        }
      }
      console.log(allIndex);
      if (allIndex.length == 0) {
        this.$message.error("请选择商品");
        return;
      }
      console.log("选择的购物车数据：", selectList);

      var selectGoodIds = [];
      for (let index = 0; index < selectList.length; index++) {
        const element = selectList[index];
        selectGoodIds.push(element.id);
      }

      console.log("选择的购物车数据Id：", selectGoodIds);

      return selectGoodIds;
    },

    //提交
    submitClick() {
      if (this.pass) {
        // 已实名认证
        var shoppingIds = this.getGoodSlDataId();

        if (shoppingIds == null || shoppingIds.length == 0) {
          return;
        }
        this.$router.push({
          name: "shopCar",
          query: { item: JSON.stringify(this.goodsList) },
        });
      } else {
        this.dialogVisible = true
      }
    },

  },
};
</script>
<style>
.company-box .el-input__inner {
  background: #f6f6f6;
  width: 296px;
}
.company-box .el-input__icon {
  color: #ee781b;
}
.company-box .el-form-item__label {
  color: #272727;
}
.company-box .el-button--primary {
  width: 145px;
  height: 38px;
  background: #ee781b;
  border-radius: 2px;
  border: 0;
  margin-top: 10px;
}
</style>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;
  background: #fff;
  padding-bottom: 30px;
}

.address-list {
  margin-top: 20px;
}
.address-list .name {
  color: #262626;
  font-size: 16px;
  width: 80px;
}
.address-list .address {
  color: #262626;
  font-size: 16px;
  width: 340px;
}
.address-list .phone {
  color: #262626;
  font-size: 16px;
  width: 170px;
  margin-right: 80px;
}
.address-list .set-default img {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-bottom: 4px;
}
.address-list .set-default span {
  color: #262626;
  font-size: 16px;
}
.goods-box {
  width: 1049px;
  margin: 10px auto;
}
.goods-table-head {
  height: 50px;
  background: #f6f6f6;
  border-radius: 4px;
  line-height: 50px;
}
.goods-table-head p {
  float: left;
  font-size: 14px;
  color: #262626;
}
.goods-table-head p:nth-child(1) img {
  width: 16px;
  height: 16px;
  margin-left: 18px;
  cursor: pointer;
}
.goods-table-head p:nth-child(2) {
  width: 527px;
  margin-left: 29px;
}
.goods-table-head p:nth-child(3) {
  margin-right: 100px;
}
.goods-table-head p:nth-child(4) {
  margin-right: 105px;
}
.goods-table-head p:nth-child(5) {
  margin-right: 104px;
}
.goods-box-list {
  margin-top: 10px;
}
.goods-list {
  height: 100px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  margin-bottom: 10px;
  padding: 14px 39px 14px 18px;
  box-sizing: border-box;
}
.goods-info {
  width: 420px;
  margin-top: 5px;
  margin-right: 60px;
}
.goods-info .goods-pic {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 20px;
}
.goods-info-detail p.goods-name {
  font-size: 14px;
  color: #383838;
  margin-top: 2px;
  margin-bottom: 4px;
}
.goods-info-detail p.other-info {
  color: #797979;
  font-size: 12px;
}
.goods-info-detail p.other-info span:nth-child(1) {
  margin-right: 39px;
}
.price {
  width: 120px;
  text-align: center;
  margin-top: 30px;
  color: #de3322;
  font-size: 16px;
}
.small-total {
  color: #de3322;

  width: 120px;
  text-align: center;
  margin-top: 23px;
  margin-left: 10px;
}
.small-total span {
  font-size: 16px;
}
.del-goods {
  font-size: 14px;
  color: #ee781b;
  width: 60px;
  text-align: right;
  line-height: 70px;
  cursor: pointer;
}
.del-goods:hover {
  text-decoration: underline;
}
.buy-num {
  margin-left: 10px;
}
.total-box {
  height: 59px;
  border: 1px solid #e6e6e6;
  margin-top: 29px;
}
.atonce-btn {
  width: 130px;
  height: 38px;
  background: #ee781b;
  border-radius: 2px;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  margin-right: 49px;
  margin-top: 10px;
  margin-left: 70px;
  cursor: pointer;
}
.atonce-btn:hover {
  opacity: 0.7;
}
.total {
  margin-top: 15px;
}
.total span:nth-child(1) {
  color: #262626;
  font-size: 14px;
}
.total span:nth-child(2) {
  color: #de3322;
  font-size: 16px;
}
.select img {
  width: 16px;
  height: 16px;
  margin-top: 30px;
  margin-right: 30px;
  cursor: pointer;
}
.all-select img {
  width: 16px;
  height: 16px;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 18px;
  cursor: pointer;
}
.all-select span,
.del-select-goods {
  margin-top: 17px;
  font-size: 14px;
  color: #000000;
  cursor: pointer;
}
.del-select-goods {
  margin-left: 20px;
}
.del-select-goods:hover {
  color: #ee781b;
  text-decoration: underline;
}
.prompts-head p:nth-child(1) {
  width: 21px;
  height: 21px;
  background: #faad14;
  border-radius: 50%;
  text-align: center;
  line-height: 21px;
  color: #fff;
  font-size: 14px;
  margin-right: 10px;
}
.prompts-head p:nth-child(2) {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}
.prompts-one .ask {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  margin-left: 32px;
  margin-top: 15px;
}
.no-data {
  text-align: center;
  margin-top: 70px;
  position: relative;
}
.no-data p {
  font-size: 14px;
  color: #666;
}
.no-data p a {
  font-size: 14px;
  color: #ee781b;
  text-decoration: underline;
}
</style>
<style>
.buy-num .el-input-number {
  width: 120px;
  margin-top: 16px;
}
.sing-table {
  width: 100%;
}
.sign-table-head {
  /* width: 537px; */
  width: 100%;
  height: 50px;
  background: #f4f4f4;
  line-height: 50px;
}
.sign-table-head p {
  float: left;
  font-size: 14px;
  color: #262626;
}
.sign-table-head p:nth-child(1) {
  margin-left: 24px;
  margin-right: 122px;
}
.sign-table-head p:nth-child(3) {
  margin-left: 219px;
}
.sign-tr td {
  float: left;
  padding: 10px 24px;
  border-bottom: 1px solid #eaeaea;
  font-size: 14px;
  height: auto;
}
.sign-tr td:nth-child(1) {
  border-right: 1px solid #eaeaea;
  width: 120px;
}
.sign-tr td:nth-child(2) {
  border-right: 1px solid #eaeaea;
  width: 150px;
}
.sign-tr td p {
  float: left;

  text-align: center;
  font-size: 14px;
  color: #ee781b;
  cursor: pointer;
}
.sign-tr:hover {
  background: #eaeaea;
}
.sign-body {
  width: 537px;
}
.sign-tr td p:hover {
  text-decoration: underline;
}
.sign-tr td p:nth-child(1) {
  margin-right: 30px;
}
.sign-tr {
  border-left: 1px solid #eaeaea;
}
.sign-tr td:nth-child(3) {
  border-right: 1px solid #eaeaea;
  width: 117px;
}
</style>
